<template>
	<view class="box">
		<view class="title">猜你想问</view>
		<uv-vtabs :current="curIndex" :chain="false" :list="list" :height="height" hdHeight="100rpx" @change="change"
			barWidth="250rpx">
			<uv-vtabs-item>
				<view class="item" v-for="(item2,index2) in list2" :key="index2">
					<view class="item-title">
						<text class="text">{{item2.name}}</text>
					</view>
					<view class="item-content">
						<uv-parse :content="item2.desc"></uv-parse>
					</view>
				</view>
			</uv-vtabs-item>
		</uv-vtabs>
	</view>
</template>

<script setup>
	import {
		computed,
		ref
	} from 'vue';
	import {
		onLoad,
		onShow
	} from "@dcloudio/uni-app"
	import {
		GetRuleCenter
	} from '@/api/modules/mine';

	const list = ref([])
	const curIndex = ref(0)
	const height = computed(() => {
		return uni.getSystemInfoSync().windowHeight - uni.upx2px(100);
	})

	function change(index) {
		curIndex.value = index
	}
	const list2 = computed(() => {
		const _list = list.value[curIndex.value]?.childrens;
		return _list ? _list : [];
	})

	const activeCode = ref("")

	onLoad((options) => {
		activeCode.value = options?.code
		getPageList()
	})

	function getPageList() {
		GetRuleCenter({
			isShow: 1
		}).then(res => {
			res.data.forEach(item => {
				list.value.push({
					name: item.title,
					code: item.code,
					childrens: [{
						name: item.title,
						desc: item.content
					}]
				})
			})


			if (activeCode.value) {
				const findIndex = list.value.findIndex(item => item.code * 1 === activeCode.value * 1)
				curIndex.value = findIndex > -1 ? findIndex : 0
			}

		})
	}
</script>

<style scoped lang="scss">
	.box {
		background-color: #F7F8FB;
		width: 100vw;
		height: 100%;
		overflow: hidden;

		.title {
			height: 90rpx;
			margin-bottom: 10rpx;
			line-height: 90rpx;
			padding-left: 30rpx;
			font-weight: 700;
		}
	}

	.item {
		padding: 10rpx 20rpx;

		&-title {
			.text {
				font-weight: 700;
				font-size: 32rpx;
				color: #111;
			}
		}

		&-content {
			padding: 20rpx 0;
			width: calc(100vw - 290rpx);
		}
	}
</style>